<template>
  <div class="footer">
    <div class="layout-main foot-main yh-layout-box">
      <ul class="foot-list">
        <li v-for="i in list">
          <div class="icon">
            <img class="max" :src="i.icon">
          </div>
          <div class="text">
            <h3>{{ i.name }}</h3>
            <p>{{ i.subtitle }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="record">
      2005-2018 Youboy 粤B2-20120239 粤ICP备09180448号-1 粤公网安备44060402000131号
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        name: '交易安全',
        subtitle: '银行监管，全程保障交易资金安全',
        icon: require('@/assets/images/enter/1.png'),
      },{
        name: '品类齐全',
        subtitle: '工业品类商品应有尽有',
        icon: require('@/assets/images/enter/2.png'),
      },{
        name: '周边市场',
        subtitle: '足不出户，便可逛批发市场',
        icon: require('@/assets/images/enter/3.png'),
      },{
        name: '实名商家',
        subtitle: '官方严格把关，核实身份，审核资质',
        icon: require('@/assets/images/enter/4.png'),
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.footer{
  background-color: #fff;
  margin-top: 40px;
  border-top: 1px solid #eee;
}
.foot-main{
  overflow: hidden;
  padding: 20px 0;
  li{
    float: left;
    width: 286px;
    margin-left: 18px;
    .icon{
      float: left;
      width: 56px;
    }
    .text{
      float: left;
      margin-left: 10px;
      h3{
        font-size: 18px;
        padding-top: 4px;
        color: #333;
        margin: 0;
      }
      p{
        font-size: 13px;
        color: #666;
      }
    }
  }
  li:nth-child(1){
    margin-left: 0;
  }
}
.record{
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 30px;
  padding-bottom: 30px;
  color: #777;
  font-size: 14px;
}
</style>
